<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{user/layout}">

<head>
	<title>List - sport activity </title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<section class="pt-sm-7">
			<div class="container pt-3 pt-xl-5">
				<div class="row">

					<!-- Main content -->
					<div class="col-12">
						<!-- Title and offcanvas button -->
						<div class="d-flex justify-content-between align-items-center">
							<!-- Title -->
							<h1 class="h3 mb-0">My profile</h1>
						</div>
						<div class="col-md-12 d-flex justify-content-between">
						<div class="col-md-5" >
						<!-- Update password -->
						<form id="userForm">
							<div class="card bg-transparent p-0">
								<!-- Card header -->
								<div class="card-header bg-transparent border-bottom px-0">
									<h6 class="mb-0">Update password</h6>
								</div>

								<!-- Card body -->
								<div class="card-body px-0">
									<!-- Current password -->
									<!--<div class="mb-3">
										<label class="form-label">Current password</label>
										<input class="form-control" type="password"
											placeholder="Enter current password">
									</div>-->
									<!-- New password -->
									<div class="mb-3">
										<label class="form-label">Enter new password</label>

										<div class="position-relative">
											<input type="password" class="form-control fakepassword pe-6" name="password"
												placeholder="Enter your password">
											<span class="position-absolute top-50 end-0 translate-middle-y p-0 me-2">
												<i class="fakepasswordicon fas fa-eye-slash cursor-pointer p-2"></i>
											</span>
										</div>
									</div>
									<!-- Confirm password -->
									<!--<div>
										<label class="form-label">Confirm new password</label>
										<input class="form-control" type="password" placeholder="Enter new password">
									</div>-->
									<!-- Button -->
									<div class="d-flex justify-content-end mt-4">
										<button type="submit" class="btn btn-primary mb-0">Change password</button>
									</div>
								</div>
							</div>
						</form>
						</div>
						</div>
					</div>
				</div>

			</div>
		</section>
	</div>
	<script layout:fragment="fragment_script">
	$(document).ready(function () {
			$("#userForm").validate({
				rules: {
					password: {
						required: true
					}
				},
				submitHandler: function (form) {
					var formData = $(form).serialize();
					$.post(ctx + "/user/updatePassword", formData, function (resp) {
						layer.msg(resp.msg);
						if (resp.status == 0) {
							setTimeout(function(){
								window.location.reload()
							}, 1000)
						}
					})
					return false; 
				}
			})
		});
	</script>
</body>

</html>